<template>
  <div class="add-page">
    <div class="blank"></div>
    <van-nav-bar
      fixed
      title="发布房源"
      left-arrow
      @click-left="$router.push('/home')"
    />
    <div class="info tt">房源信息</div>
    <van-field
      is-link
      readonly
      input-align="right"
      label="小区名称"
      placeholder="请输入小区名称"
      @click="$router.push('/gorent/search')"
    />
    <van-field
      v-model="rentprice"
      type="digit"
      label="租金"
      placeholder="请输入租金/月"
      >
      <template #extra>
            <span :style="{ color: '#c8c9cc' }">￥/月</span>
          </template>
    </van-field>
    <van-field
      v-model="rentsize"
      type="digit"
      label="建筑面积"
      placeholder="请输入建筑面积"
    >
    <template #extra>
            <span :style="{ color: '#c8c9cc' }">m²</span>
          </template>
        </van-field>
    <van-field
      readonly
      is-link
      clickable
      name="picker"
      :value="Typevalue"
      input-align="right"
      label="户型"
      placeholder="请选择"
      @click="showPickerType = true"
    />
    <van-popup v-model="showPickerType" position="bottom">
      <van-picker
        show-toolbar
        :columns="Chooseroomtype"
        @confirm="onConfirmType"
        @cancel="showPickerType = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      is-link
      name="picker"
      input-align="right"
      :value="Floorvalue"
      label="所在楼层"
      placeholder="请选择"
      @click="showPickerFloor = true"
    />
    <van-popup v-model="showPickerFloor" position="bottom">
      <van-picker
        show-toolbar
        :columns="Choosefloor"
        @confirm="onConfirmFloor"
        @cancel="showPickerFloor = false"
      />
    </van-popup>
    <van-field
      readonly
      clickable
      is-link
      input-align="right"
      name="picker"
      :value="Orientvalue"
      label="朝向"
      placeholder="请选择"
      @click="showPickerOrient = true"
    />
    <van-popup v-model="showPickerOrient" position="bottom">
      <van-picker
        show-toolbar
        :columns="Chooseoriented"
        @confirm="onConfirmOrient"
        @cancel="showPickerOrient = false"
      />
    </van-popup>
    <div class="title tt">房屋标题</div>
    <van-field
      v-model="renttitle"
      placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
    />
    <div class="title tt">房屋图像</div>
    <van-uploader v-model="fileList" multiple :after-read="afterRead" />
    <div class="title tt">房屋配置</div>
    <div class="support">
      <div
        class="equip"
        v-for="(item, index) in iconList"
        :key="index"
        @click="addsupportFn(index)"
        :class="{ active: addsupport.includes(index) }"
      >
        <i :class="`iconfont icon-${item}`"></i>
        <span>{{ index }}</span>
      </div>
    </div>
    <div class="foot">
      <div class="discription">
        <div class="title tt">房屋描述</div>
        <van-field
          v-model="description"
          rows="2"
          :autosize="{ minHeight: 150 }"
          type="textarea"
          maxlength="50"
          placeholder="请输入房屋描述信息"
        />
      </div>
    </div>
    <div class="submit">
      <div class="cancel" @click="$router.push('/home')">取消</div>
      <div class="sub" @click="handlesub">提交</div>
    </div>
  </div>
</template>

<script>
import { goRentList, postRent, postRentimg, getCityId } from "@/api/search";
export default {
  name: "add-page",
  data() {
    return {
      Typevalue: "",
      Floorvalue: "",
      Orientvalue: "",
      rentprice: "",
      rentsize: "",
      renttitle: "",
      description: "",
      houseImg:'',
      upImg:[],
      fileList:[],
      showPickerType: false,
      showPickerFloor: false,
      showPickerOrient: false,
      floor: [],
      oriented: [],
      roomtype: [],
      Choosefloor: [],
      Chooseoriented: [],
      Chooseroomtype: [],
      floorvalue:'',
      orientedvalue:'',
      roomtypevalue:'',
      community:'',
      cityNow:'上海',
      cityid:'',
      supporting: [],
      iconList: {
        衣柜: "yigui",
        洗衣机: "xiyiji",
        空调: "kongdiao",
        天然气: "tianranqi",
        冰箱: "fridge",
        暖气: "nuanqi",
        电视: "dianshi",
        热水器: "reshuiqi",
        宽带: "wifi",
        沙发: "shafa",
      },
      addsupport: [],
    };
  },
  methods: {
    onConfirmType(value) {
      this.Typevalue = value;
      this.showPickerType = false;
      const res = this.roomtype.find(item => item.label === value)
      this.roomtypevalue = res.value;
    },
    onConfirmFloor(value) {
      this.Floorvalue = value;
      this.showPickerFloor = false;
      const res = this.floor.find(item => item.label === value)
      this.floorvalue = res.value;
    },
    onConfirmOrient(value) {
      this.Orientvalue = value;
      this.showPickerOrient = false;
      const res = this.oriented.find(item => item.label === value)
      this.orientedvalue = res.value;
    },
    async afterRead(file){
      // console.log(img);
      const formData = new FormData()
      formData.set('file', file.file)
      const res = await postRentimg(formData)
      console.log(res)
      this.upImg = [...this.upImg, ...res.body]
      this.houseImg = this.upImg.join('|')
      console.log(this.houseImg);
    },
    addsupportFn(icon) {
      if (this.addsupport.includes(icon)) {
        const index = this.addsupport.findIndex((item) => item === icon);
        this.addsupport.splice(index, 1);
      } else {
        this.addsupport.push(icon);
      }
    },
    async getCityId(name) {
      const {body} = await getCityId(name)
      this.cityid = body.value
    },
    async handlesub(){
      const res = await postRent({
        title:this.renttitle,
        description:this.description,
        houseImg:this.houseImg,
        oriented:this.orientedvalue,
        supporting:this.addsupport.join('|') || '',
        price:this.rentprice,
        roomType:this.roomtypevalue,
        size:this.rentsize,
        floor:this.floorvalue,
        community:"AREA|93cbbe43-741d-de54"
      })
      console.log(res);
      this.$toast.success('发布成功')
      setTimeout(()=>{
        this.$router.push('/myrent')
      },1000)
    }
  },
  async created() {
    const { body } = await goRentList();
    // console.log(body);
    this.floor = body.floor
    this.oriented = body.oriented
    this.roomtype = body.roomType
    this.Choosefloor = body.floor.map((item) => item.label);
    this.Chooseoriented = body.oriented.map((item) => item.label);
    this.Chooseroomtype = body.roomType.map((item) => item.label);
    this.getCityId(this.cityNow)
  },
};
</script>

<style lang="less" scoped>
.tt {
  width: 100%;
  height: 20px;
  padding: 10px 15px;
  font-size: 14px;
  border-bottom: 1px solid #f4f4f4;
}
.info {
  color: #21b97a;
}
.title {
  color: #646566;
  background-color: #fff;
}
.blank {
  height: 46px;
}
.van-uploader {
  margin: 10px;
}
.active {
  color: #21b97a;
}
.support {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 10px;
  .equip {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0;
    i {
      font-size: 25px;
      margin-bottom: 10px;
    }
    span {
      font-size: 14px;
    }
  }
}
.foot {
  height: 260px;
  background-color: #f6f5f6;
  padding: 20px 0;
}
.submit{
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0%;
  height: 45px;
  .cancel{
    width: 50%;
    text-align: center;
    line-height: 45px;
    background-color: #fff;
    color: #21b97a;
  }
  .sub{
    text-align: center;
    line-height: 45px;
    width: 50%;
    background-color: #21b97a;
    color: #fff;
  }
}
</style>
